import React, { useState } from 'react';
import { HERB_CATEGORIES, HERB_PROPERTIES, HERB_FUNCTIONS } from '../utils/constants';
import './SearchFilter.css';

interface SearchFilterProps {
  onSearch: (filters: FilterOptions) => void;
}

export interface FilterOptions {
  keyword: string;
  categories: string[];
  properties: {
    性: string[];
    味: string[];
  };
  functions: string[];
}

export const SearchFilter: React.FC<SearchFilterProps> = ({ onSearch }) => {
  const [filters, setFilters] = useState<FilterOptions>({
    keyword: '',
    categories: [],
    properties: {
      性: [],
      味: []
    },
    functions: []
  });

  const [expanded, setExpanded] = useState<{
    categories: boolean;
    properties: boolean;
    functions: boolean;
  }>({
    categories: false,
    properties: false,
    functions: false
  });

  const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFilters(prev => ({ ...prev, keyword: e.target.value }));
  };

  const handleCategoryChange = (category: string) => {
    setFilters(prev => {
      const newCategories = prev.categories.includes(category)
        ? prev.categories.filter(c => c !== category)
        : [...prev.categories, category];
      return { ...prev, categories: newCategories };
    });
  };

  const handlePropertyChange = (type: '性' | '味', value: string) => {
    setFilters(prev => {
      const currentValues = prev.properties[type];
      const newValues = currentValues.includes(value)
        ? currentValues.filter(v => v !== value)
        : [...currentValues, value];
      return {
        ...prev,
        properties: {
          ...prev.properties,
          [type]: newValues
        }
      };
    });
  };

  const handleFunctionChange = (func: string) => {
    setFilters(prev => {
      const newFunctions = prev.functions.includes(func)
        ? prev.functions.filter(f => f !== func)
        : [...prev.functions, func];
      return { ...prev, functions: newFunctions };
    });
  };

  const handleToggleExpand = (section: 'categories' | 'properties' | 'functions') => {
    setExpanded(prev => ({
      ...prev,
      [section]: !prev[section]
    }));
  };

  const handleSearch = () => {
    onSearch(filters);
  };

  const handleReset = () => {
    setFilters({
      keyword: '',
      categories: [],
      properties: {
        性: [],
        味: []
      },
      functions: []
    });
    onSearch({
      keyword: '',
      categories: [],
      properties: {
        性: [],
        味: []
      },
      functions: []
    });
  };

  return (
    <div className="search-filter card">
      <div className="search-bar">
        <input
          type="text"
          placeholder="搜索药材名称、功效..."
          value={filters.keyword}
          onChange={handleKeywordChange}
        />
        <button className="btn btn-primary" onClick={handleSearch}>搜索</button>
        <button className="btn btn-secondary" onClick={handleReset}>重置</button>
      </div>

      <div className="filter-section">
        <div className="filter-header" onClick={() => handleToggleExpand('categories')}>
          <h3>药材分类</h3>
          <span className={`expand-icon ${expanded.categories ? 'expanded' : ''}`}>▼</span>
        </div>
        {expanded.categories && (
          <div className="filter-content filter-grid">
            {HERB_CATEGORIES.map(category => (
              <label key={category.id} className="filter-option">
                <input
                  type="checkbox"
                  checked={filters.categories.includes(category.name)}
                  onChange={() => handleCategoryChange(category.name)}
                />
                <span>{category.name}</span>
              </label>
            ))}
          </div>
        )}
      </div>

      <div className="filter-section">
        <div className="filter-header" onClick={() => handleToggleExpand('properties')}>
          <h3>药性</h3>
          <span className={`expand-icon ${expanded.properties ? 'expanded' : ''}`}>▼</span>
        </div>
        {expanded.properties && (
          <div className="filter-content">
            <div>
              <h4>性</h4>
              <div className="filter-group">
                {HERB_PROPERTIES.性.map(xing => (
                  <label key={xing} className="filter-option">
                    <input
                      type="checkbox"
                      checked={filters.properties.性.includes(xing)}
                      onChange={() => handlePropertyChange('性', xing)}
                    />
                    <span>{xing}</span>
                  </label>
                ))}
              </div>
            </div>
            <div>
              <h4>味</h4>
              <div className="filter-group">
                {HERB_PROPERTIES.味.map(wei => (
                  <label key={wei} className="filter-option">
                    <input
                      type="checkbox"
                      checked={filters.properties.味.includes(wei)}
                      onChange={() => handlePropertyChange('味', wei)}
                    />
                    <span>{wei}</span>
                  </label>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="filter-section">
        <div className="filter-header" onClick={() => handleToggleExpand('functions')}>
          <h3>功效分类</h3>
          <span className={`expand-icon ${expanded.functions ? 'expanded' : ''}`}>▼</span>
        </div>
        {expanded.functions && (
          <div className="filter-content filter-grid">
            {HERB_FUNCTIONS.map(func => (
              <label key={func.id} className="filter-option">
                <input
                  type="checkbox"
                  checked={filters.functions.includes(func.name)}
                  onChange={() => handleFunctionChange(func.name)}
                />
                <span>{func.name}</span>
              </label>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}; 